import React, { useEffect } from 'react'
import { Card, Button, Checkbox, Form, Input, message } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'
import {
  reqAddHospitalSet,
  reqOneHospitalSet,
  reqUpdateHospitalSet,
} from '@api/hospital/hospitalSet'

export default function HospitalSetAddOrUpdate() {
  // 获取路由参数. 如果是添加功能,id是undefined. 如果是修改则id有值
  const { id } = useParams()

  // 创建form实例
  const [form] = Form.useForm()
  // 得到编程式导航的函数
  const navigate = useNavigate()

  const onFinish = async (values: any) => {
    // 需要获取form表单中的所有数据
    const data = form.getFieldsValue()
    if (id) {
      // 如果是修改数据,则应该在data中添加id
      data.id = id
      // 调用方法,修改当前医院的数据
      await reqUpdateHospitalSet(data)
      message.success('修改成功')
    } else {
      // 请求添加医院设置
      await reqAddHospitalSet(data)
      message.success('添加成功')
    }

    // 切换路由到医院设置界面
    navigate('/syt/hospital/hospitalSet')
  }

  // 如果当前是修改医院设置,则组件一旦挂载就发送请求,获取一条医院数据
  useEffect(() => {
    async function fetchData() {
      // 发送请求,根据id获取一条医院数据
      const result = await reqOneHospitalSet(id as string)
      // 将拿到的数据添加到表单中
      form.setFieldsValue(result)
    }
    // 因为添加和修改用的是同一个组件,只有修改时,才需要获取当前医院数据,如果是修改,则id有值,如果是添加则id没有值, 所以id有值才发送请求
    id && fetchData()
  }, [])

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 2 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人名称"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: '请输入正确的手机格式',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2 }}>
          <Button type="primary" htmlType="submit" style={{ marginRight: 20 }}>
            保存
          </Button>
          <Button
            onClick={() => {
              navigate(-1)
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
